#{extends '/template/main.html' /}
<!-- Removing search and results count filter -->
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">订单来源分析</h3>
    </div>
    <div class="panel-body">
        <form method="post" id="searchForm" action="/BS0024/admin/report/source/index">
            <div style="margin-bottom: 20px;width:160px;float: left;">
                <input type="text" name="startDate" class="form-control datepicker" style="width:150px" placeholder="开始日期" value="${startDate}">
            </div>
            <div style="margin-bottom: 20px;width:160px;float: left;">
                <input type="text" name="endDate" class="form-control datepicker" style="width:150px" placeholder="结束日期" value="${endDate}">
            </div>
        </form>
        <button class="btn btn-turquoise" id="searchBtn">开始检索</button>
        <div id="main" style="width: 600px;height:400px;"></div>
        <table class="table table-bordered table-striped" id="example-2">
            <thead>
            <tr>
                <th>订单来源</th>
                <th>数量</th>
            </tr>
            </thead>

            <tbody class="middle-align">
            #{list orderList,as:'order'}
            <tr>
                <td>&{'GoodsType.' + order?.goods_type}</td>
                <td>${order?.num}</td>
            </tr>
            #{/list}
            </tbody>
        </table>
    </div>
</div>

<!-- Imported styles on this page -->
<link rel="stylesheet" href="/public/js/datatables/dataTables.bootstrap.css">

<script src="/public/js/datatables/js/jquery.dataTables.min.js"></script>

<!-- Imported scripts on this page -->
<script src="/public/js/datatables/dataTables.bootstrap.js"></script>
<script src="/public/js/datatables/yadcf/jquery.dataTables.yadcf.js"></script>
<script src="/public/js/datatables/tabletools/dataTables.tableTools.min.js"></script>

<script type="text/javascript" src="/public/laypage/laypage.js"></script>
<script type="text/javascript" src="/public/js/echarts/echarts.js"></script>

<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    var array = new Array();
    var dataArr = new Array();

    #{list orderList,as:'order'}
    var name = "&{'GoodsType.' + order?.goods_type}";
    var num = parseInt("${order?.num}");

    array.push(name);

    var item = {};
    item.value = num;
    item.name = name;

    dataArr.push(item);
    #{/list}

    // 指定图表的配置项和数据
    option = {
        title : {
            text: '',
            subtext: '',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: array
        },
        series : [
            {
                name: '订单来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:dataArr,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    $(document).ready(function(){
        $(document).on("click", "#searchBtn", function(){
            $("#searchForm").attr("action", "/BS0024/admin/report/source/index");
            $('#searchForm').submit();
        })
    });
</script>
